
import { observer } from "mobx-react";
import { FC,useState} from "react"


import { TabsProps,Tabs,Typography} from 'antd';
import { LoginPass } from "./loginPass";
import { LoginPhone } from "./loginPhone";
const { Title } = Typography
const Logins: FC<any> = () => {
    const onChange = (key: string) => {
        console.log(key);
        setActiveKey(key)
    };
    const [url,setUrl] = useState<string>('https://qkodo.playlistmusic.com.cn/transcode_1080/video/3b0357d8859fe23c255d90851144e623.mp4')
    const [activeKey,setActiveKey] = useState('password')
    const items: TabsProps['items'] = [
        {
            key: 'password',
            label: `账号密码登录`,
            children: <LoginPass />,
        },
        {
            key: 'phone',
            label: `手机号登录`,
            children: <LoginPhone />,
        },
    ];
    return (
        <div className='lgbox'>
            <video
                src={url}
                autoPlay
                loop
                muted
                className='myvideo'>
            </video>

            <div className="login-box">
                <Title level={2} className="title">欢迎登录</Title>
                <div className="box">
                    <Tabs activeKey={activeKey} items={items} onChange={onChange} />
                </div>
            </div>
        </div>
    )
}

export default observer(Logins)